<script setup>
import { RouterLink, RouterView } from 'vue-router'

import { ref,inject } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'


const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
const asideWidth = ref(5000);

const isCollapse = inject('isCollapse', ref(false))
const handleOpen = (key, keyPath) => {
  isCollapse.value = false;
};
const handleClose = () =>{
  isCollapse.value = !isCollapse.value;
  this.asideWidth = this.isCollapse ? 0 : 5000;
}



</script>

<template>



  <div class="common-layout">
    <el-container>
      <el-header style="text-align: center; font-size: 24px">
        <div class="toolbar">

          <h1>这是一个标题</h1>
        </div>
      </el-header>
      <el-container>
        <el-aside :class="{ 'collapse': isCollapse }" :width=asideWidth>
          <el-scrollbar>
            <el-menu >
              <!--<el-sub-menu index="1">-->
                <template #title>
                  <el-icon><message /></el-icon>列表
                </template>
                <el-menu-item index="1-1"><RouterLink to="/importItem">importItem</RouterLink></el-menu-item>
                <el-menu-item index="1-2"><RouterLink to="/queryItem">queryItem</RouterLink></el-menu-item>
                <el-menu-item index="1-3"><RouterLink to="/qHome">qHome</RouterLink></el-menu-item>
              <!--</el-sub-menu>-->
 
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
            <!-- 折叠菜单 -->
            <div class="collapse-btn" @click="handleClose">
              <el-icon>
                <Fold />
              </el-icon>收
            </div>

          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>


</template>

<style scoped>
.collapse {
  width: 0 !important; /* 当 isCollapsed 为 true 时，强制设置宽度为 0 */
  overflow: hidden; /* 隐藏超出部分 */
  transition: width 0.3s ease; /* 添加过渡效果 */
}
</style>
